<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner_2" v-for="item in banner">
				<img :src="item.src" alt="" />
				<p ref='a'>{{ item.desc }}</p>
			</div>
			<div class="content">
				<nav-v></nav-v>
				<consult-v></consult-v>
				<div class="caseList">
					<div class="title"><p>案例展示</p><em></em></div>
					<div class="TabSwitch">
						<div class="tab">
							<a href="javascript:;" @click="caseList" :class="{active : caseY}">油画定制</a>
							<a href="javascript:;" @click="caseList" :class="{active : caseS}">手绘壁画</a>
							<a href="javascript:;" @click="caseList" :class="{active : caseD}">3D壁画</a>
							<a href="javascript:;" @click="caseList" :class="{active : casef}">浮雕雕塑</a>
							<a href="javascript:;" @click="caseList" :class="{active : caseX}">佛像漆画</a>
						</div>
						<div class="con">
							<transition name="vux-pop-in">  
								<ul v-if="caseY">
									<li v-for="(item,index) in caseListY" :class="{center : item.center}">
										<img class="previewer-demo-img" :src="item.src" alt="" @click="show(index)" />
										<router-link to="/caseMsg">{{ item.text }}</router-link>
									</li>
									<div v-transfer-dom>
									    <previewer :list="caseListY" ref="previewer" :options="options"></previewer>
									</div>
								</ul>
							</transition>  
							
							<transition name="vux-pop-in">  
								<ul v-if="caseS">
									<li v-for="(item,index) in caseListS" :class="{center : item.center}">
										<img :src="item.src" class="previewer-demo-img" alt="" @click="show(index)" />
										<router-link to="/caseMsg">{{ item.text }}</router-link>
									</li>
									<div v-transfer-dom>
									    <previewer :list="caseListS" ref="previewer" :options="options"></previewer>
									</div>
								</ul>
							</transition>  
							
							<transition name="vux-pop-in">  
								<ul v-if="caseD">
									<li v-for="(item,index) in caseListD" :class="{center : item.center}">
										<img :src="item.src" class="previewer-demo-img" alt="" @click="show(index)" />
										<router-link to="/caseMsg">{{ item.text }}</router-link>
									</li>
									<div v-transfer-dom>
									    <previewer :list="caseListD" ref="previewer" :options="options"></previewer>
									</div>
								</ul>
							</transition>  
							
							<transition name="vux-pop-in"> 
								<ul v-if="casef">
									<li v-for="(item,index) in caseListf" :class="{center : item.center}">
										<img :src="item.src" class="previewer-demo-img" @click="show(index)" alt="" />
										<router-link to="/caseMsg">{{ item.text }}</router-link>
									</li>
									<div v-transfer-dom>
									    <previewer :list="caseListf" ref="previewer" :options="options"></previewer>
									</div>
								</ul>
							</transition>  
							
							<transition name="vux-pop-in"> 
								<ul v-if="caseX">
									<li v-for="(item,index) in caseListX" :class="{center : item.center}">
										<img :src="item.src" class="previewer-demo-img" @click="show(index)" alt="" />
										<router-link to="/caseMsg">{{ item.text }}</router-link>
									</li>
									<div v-transfer-dom>
									    <previewer :list="caseListX" ref="previewer" :options="options"></previewer>
									</div>
								</ul>
							</transition>  
						</div>
					</div>
				</div>
				
				<div class="charge">
					<div class="title"><p>收费标准</p><em></em></div>
					<div class="con">
						<span v-for="item in charge">{{ item.chargeText }} <br /> {{ item.chargeText2 }} </span>
						<ul>
							<li class="con_title">项目</li><li class="con_title">价格</li>
							<li v-for="item in charge_mon">{{ item }}</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import consult from '../public/consult'
import nav from '../public/nav'
import towBanner from '../../assets/towBanner.jpg'

import caseY_1 from '../../assets/caseY_1.jpg' 
import caseY_2 from '../../assets/caseY_2.jpg' 
import caseY_3 from '../../assets/caseY_3.jpg' 
import caseY_4 from '../../assets/caseY_4.jpg' 
import caseY_5 from '../../assets/caseY_5.jpg' 
import caseY_6 from '../../assets/caseY_6.jpg' 
import caseY_7 from '../../assets/caseY_7.jpg' 
import caseY_8 from '../../assets/caseY_8.jpg' 
import caseY_9 from '../../assets/caseY_9.jpg' 
import caseY_10 from '../../assets/caseY_10.jpg' 
import caseY_11 from '../../assets/caseY_12.jpg' 
import caseY_12 from '../../assets/caseY_12.jpg' 

import caseS_1 from '../../assets/caseS_1.jpg' 
import caseS_2 from '../../assets/caseS_2.jpg' 
import caseS_3 from '../../assets/caseS_3.jpg' 
import caseS_4 from '../../assets/caseS_4.jpg' 
import caseS_5 from '../../assets/caseS_5.jpg' 
import caseS_6 from '../../assets/caseS_6.jpg' 
import caseS_7 from '../../assets/caseS_7.jpg' 
import caseS_8 from '../../assets/caseS_8.jpg' 
import caseS_9 from '../../assets/caseS_9.jpg' 
import caseS_10 from '../../assets/caseS_10.jpg' 
import caseS_11 from '../../assets/caseS_11.jpg' 
import caseS_12 from '../../assets/caseS_12.jpg' 

import caseD_1 from '../../assets/caseD_1.jpg' 
import caseD_2 from '../../assets/caseD_2.jpg' 
import caseD_3 from '../../assets/caseD_3.jpg' 
import caseD_4 from '../../assets/caseD_4.jpg' 
import caseD_5 from '../../assets/caseD_5.jpg' 
import caseD_6 from '../../assets/caseD_6.jpg' 
import caseD_7 from '../../assets/caseD_7.jpg' 
import caseD_8 from '../../assets/caseD_8.jpg' 
import caseD_9 from '../../assets/caseD_9.jpg' 

import casef_1 from '../../assets/casef_1.jpg' 
import casef_2 from '../../assets/casef_2.jpg' 
import casef_3 from '../../assets/casef_3.jpg' 
import casef_4 from '../../assets/casef_4.jpg' 
import casef_5 from '../../assets/casef_5.jpg' 
import casef_6 from '../../assets/casef_6.jpg' 
import casef_7 from '../../assets/casef_7.jpg' 
import casef_8 from '../../assets/casef_8.jpg' 
import casef_9 from '../../assets/casef_9.jpg' 

import caseX_1 from '../../assets/caseX_1.jpg' 
import caseX_2 from '../../assets/caseX_2.jpg' 
import caseX_3 from '../../assets/caseX_3.jpg' 
import caseX_4 from '../../assets/caseX_4.jpg' 
import caseX_5 from '../../assets/caseX_5.jpg' 
import caseX_6 from '../../assets/caseX_6.jpg' 
import caseX_7 from '../../assets/caseX_7.jpg' 
import caseX_8 from '../../assets/caseX_8.jpg' 
import caseX_9 from '../../assets/caseX_9.jpg' 

import {  TransferDom,Previewer } from 'vux'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	consultV : consult,
  	navV : nav, Previewer
  }, 
  directives: {
    TransferDom
  },
  data () {
    return {
    	banner : [
    		{src : towBanner,desc : '—— 打造时尚有品位的家居生活和人文环境。'}
    	],
    	caseTab : [
    		{title1 : '油画定制'}, {title2 : '手绘壁画'}, {title3 : '3D壁画'}, {title4 : '浮雕雕塑'}, {title5 : '佛像漆画'}
    	],
    	caseY : true, caseS : false, caseD : false, casef : false, caseX : false,	
    	caseListY : [
			{src : caseY_1, text : '油画定制'},
    		{src : caseY_2, text : '油画定制', center : true},
    		{src : caseY_3, text : '油画定制'},
    		{src : caseY_4, text : '油画定制'},
    		{src : caseY_5, text : '油画定制', center : true},
    		{src : caseY_6, text : '油画定制'},
    		{src : caseY_7, text : '油画定制'},
    		{src : caseY_8, text : '油画定制', center : true},
    		{src : caseY_9, text : '油画定制'},
    		{src : caseY_10, text : '油画定制'},
    		{src : caseY_11, text : '油画定制', center : true},
    		{src : caseY_12, text : '油画定制'}
    	],
    	caseListS : [
    		{src : caseS_1, text : '手绘壁画'},
    		{src : caseS_2, text : '手绘壁画', center : true},
    		{src : caseS_3, text : '手绘壁画'},
    		{src : caseS_4, text : '手绘壁画'},
    		{src : caseS_5, text : '手绘壁画', center : true},
    		{src : caseS_6, text : '手绘壁画'},
    		{src : caseS_7, text : '手绘壁画'},
    		{src : caseS_8, text : '手绘壁画', center : true},
    		{src : caseS_9, text : '手绘壁画'},
    		{src : caseS_10, text : '手绘壁画'},
    		{src : caseS_11, text : '手绘壁画', center : true},
    		{src : caseS_12, text : '手绘壁画'},
    	],
    	caseListD : [
    		{src : caseD_1, text : '3D壁画'},
    		{src : caseD_2, text : '3D壁画', center : true},
    		{src : caseD_3, text : '3D壁画'},
    		{src : caseD_4, text : '3D壁画'},
    		{src : caseD_5, text : '3D壁画', center : true},
    		{src : caseD_6, text : '3D壁画'},
    		{src : caseD_7, text : '3D壁画'},
    		{src : caseD_8, text : '3D壁画', center : true},
    		{src : caseD_9, text : '3D壁画'},
    		{src : caseD_9, text : '3D壁画'},
    		{src : caseD_8, text : '3D壁画', center : true},
    		{src : caseD_9, text : '3D壁画'},
    	],
    	caseListf : [
    		{src : casef_1, text : '浮雕雕塑'},
    		{src : casef_2, text : '浮雕雕塑', center : true},
    		{src : casef_3, text : '浮雕雕塑'},
    		{src : casef_4, text : '浮雕雕塑'},
    		{src : casef_5, text : '浮雕雕塑', center : true},
    		{src : casef_6, text : '浮雕雕塑'},
    		{src : casef_7, text : '浮雕雕塑'},
    		{src : casef_8, text : '浮雕雕塑', center : true},
    		{src : casef_9, text : '浮雕雕塑'},
    		{src : casef_9, text : '浮雕雕塑'},
    		{src : casef_8, text : '浮雕雕塑', center : true},
    		{src : casef_9, text : '浮雕雕塑'},
    	],
    	caseListX : [
    		{src : caseX_1, text : '佛像漆画'},
    		{src : caseX_2, text : '佛像漆画', center : true},
    		{src : caseX_3, text : '佛像漆画'},
    		{src : caseX_4, text : '佛像漆画'},
    		{src : caseX_5, text : '佛像漆画', center : true},
    		{src : caseX_6, text : '佛像漆画'},
    		{src : caseX_7, text : '佛像漆画'},
    		{src : caseX_8, text : '佛像漆画', center : true},
    		{src : caseX_9, text : '佛像漆画'},
    		{src : caseX_9, text : '佛像漆画'},
    		{src : caseX_9, text : '佛像漆画', center : true},
    		{src : caseX_9, text : '佛像漆画'},
    	],
	    options: {
	        getThumbBoundsFn (index) {
	          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
	          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
	          let rect = thumbnail.getBoundingClientRect()
	          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
	        }
	    },
    	charge : [
    		{
    			chargeText : '很多客户质疑为什么手绘的价格差距这么大，其实绘画跟工作一样的，都是按照工时计算的，因此耗时间越久，相对应价格越高。相比之下单色类的墙绘就要比写实类便宜很多。绘制面积大于200平米，价格更加优惠',
    			chargeText2 : '以下为参考价，具体以实际图案和商议价格为准'
    		}
    	],
    	charge_mon : [
    		'单色平涂','60-120元/平','藤蔓花纹','80-280元/平','卡通人物动画','80-280元/平','植物花草','180-280元/平','写意花草','180-480元/平','写实风景','280-880元/平','3D壁画','380元以上/平','油画人物','580元以上/平','国画工笔','580元以上/平','唐卡墙绘','800元以上/平'
    	]
    }
  },
  methods : {
  	caseList (ev){
  		
  		if(ev.target.innerHTML == '油画定制'){
  			this.caseY = true; this.caseS = false; this.caseD = false; this.casef = false; this.caseX = false;
  		}else if(ev.target.innerHTML == '手绘壁画'){
  			this.caseY = false; this.caseS = true; this.caseD = false; this.casef = false; this.caseX = false;
  		}else if(ev.target.innerHTML == '3D壁画'){
  			this.caseY = false; this.caseS = false; this.caseD = true; this.casef = false; this.caseX = false;
  		}else if(ev.target.innerHTML == '浮雕雕塑'){
  			this.caseY = false; this.caseS = false; this.caseD = false; this.casef = true; this.caseX = false;
  		}else{
  			this.caseY = false; this.caseS = false; this.caseD = false; this.casef = false; this.caseX = true;
  		}
  	},
  	show (index) {
      this.$refs.previewer.show(index)
    }
  },
  mounted () {
  	setTimeout(()=>{	
  		this.$refs.a[0].style.right="0"
  	},300)
  }
}

</script>

<style type="text/css" scoped>
	/* caseList.style */
	.content .title{
		width:55% !important; margin: 0 auto; position: relative; border-bottom: 0.02rem solid #ccc;  margin-bottom: 0.3rem;  padding-top: 0.2rem;
	}
	.content .title p{
		font-size: 0.24rem; width: 60%; margin: 0 auto; text-align: center; line-height: 0.7rem;
	}
	.content .title em{
		width: 40%; height: 0.02rem; background: #de402e !important; position: absolute; left: 30%;
	}
	
	.TabSwitch .con{
		height: auto; overflow: hidden;
	}
	.caseList{
		overflow: hidden;
	}
	.TabSwitch li{
		list-style: none; width: 32%; float: left; margin-bottom: 0.1rem;
	}
	.TabSwitch .center{
		margin: 0 0.064rem;
	}
	.TabSwitch li img{
		width: 100%; height: 1.2rem; 
	}
	.TabSwitch li a{
		line-height: 0.35rem; color: #000; display: block; text-align: center; border: 0.01rem solid #ccc; margin-top: -0.04rem; border-radius: 0.02rem;
	}
	.TabSwitch .tab{
		overflow: hidden; margin-bottom: 0.15rem;
	}
	.TabSwitch .tab a{
		display: block; width:0.6rem; height: 0.32rem; background: #afafaf; color: #fff; text-align: center; line-height: 0.32rem; float: left; margin-left: 0.034rem;
	}
	.TabSwitch .tab .active{
		background: #de402e;
	}
	
	.charge{
		 background: #f7f7f7; width: 100%; 
	}
	.charge .con{
		padding: 0 0.2rem; overflow: hidden;
	}
	.charge .con ul{
		margin-top: 0.5rem; margin-bottom: 0.3rem; overflow: hidden;
	}
	.charge .con span{
		color:#696969; 
	}
	.charge .con li{
		list-style: none; float: left; width: 1.32rem;  height: 0.34rem; background: rgb(222,222,222); text-indent: 1em; line-height: 0.34rem;
	}
	.charge .con li:nth-of-type(2n){
		margin: 0 0 0.1rem 0.15rem;
	}
	.charge .con .con_title{
		background: #4292cf; color: #fff;
	}
</style>
<style type="text/css">
	.banner_2{
		position: relative;
	}
	.banner_2 img{
		width: 100%; height: 0.9rem;
	}
	.banner_2 p{
		color: #fff; position: absolute; top: 0.6rem; right: -22rem; -webkit-transition: 0.2s; transition: 0.5s;
	}

</style>